<template>
  <el-select v-model="iptValue" placeholder="Select" @change="handleChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script setup>
import { computed } from "vue";
let Props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  label: {
    type: String,
    default: "",
  },
  options: {
    type: Array,
    default: () => [],
  },
});
let emits = defineEmits(["update:modelValue", "update:label"]);
const iptValue = computed({
  get() {
    return Props.modelValue;
  },
  set(value) {
    emits("update:modelValue", value);
  },
});

const handleChange = (value) => {
  let obj = Props.options.find((item) => item.value === value);
  emits("update:label", obj ? obj.label : "");
};
</script>

<style scoped></style>
